<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-08 19:20:50
-->
<template>
  <div class="list">
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content" v-loading="loading">
      <div class="wrapper">
        <!-- 列表头 -->
        <div class="listHeader">
          <div class="header_left">{{ d.name }}</div>
          <div class="header_right">
            当前位置：首页&nbsp;&nbsp;>>&nbsp;&nbsp;{{
              d.name
            }}&nbsp;&nbsp;&nbsp;
          </div>
        </div>
        <!-- /列表头 -->
        <!-- 列表体 -->
        <div class="list_inner">
          <!-- 列表菜单 -->
          <div class="inner_left">
            <ul
              v-for="tit in categoryChild"
              :key="tit.id"
              @click="toListHandler(tit)"
            >
              <li :class="$route.query.name == tit.name ? 'current' : ''">
                <div class="li_left">{{ tit.name }}</div>
                <div class="li_right">></div>
              </li>
            </ul>
          </div>
          <!-- /列表菜单 -->
          <!-- 列表项 -->
          <div class="inner_right">
            <div class="ifshow" v-if="articleData.total > 0">
              <div
                class="list_item"
                @click="toArticleHandler(a.id)"
                v-for="a in articleData.list"
                :key="a.id"
              >
                <span class="item_title">{{ a.title }}</span>
                <span class="item_date">{{ a.publishTime | fmtDate }}</span>
              </div>
            </div>
            <div v-else style="text-align: center; color: red; padding: 2em">
              暂无数据
            </div>
            <!-- 分页 -->
            <div class="page_query">
              <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total"
              >
              </el-pagination>
            </div>
            <!-- /分页 -->
          </div>
          <!-- /列表项 -->
        </div>
        <!-- /列表体 -->
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>

<script>
import { get } from "../utils/request";
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      loading: false,
      category: {},
      param: {
        page: 1,
        pageSize: 5,
      },
      articleData: {
        list: [],
      },
      d: {},
      categoryChild: {}
    };
  },
  watch: {},
  created() {
    this.category = this.$route.query;
    this.toCategoryFather();
    this.loadCategoryTree();
    this.loadArticles();
  },
  methods: {
    toCategoryFather() {
      let d = [];
      if (this.category.parentId) {
        let url = "/index/category/findAll";
        // let d = [];
        get(url).then((resp) => {
          this.categoryItemq = resp.data;
          // console.log(this.categoryItem);
          for (let d of this.categoryItemq) {
            // console.log(d.name);
            // console.log(this.category.parentId);
            if (d.id == this.category.parentId) {
              // console.log(d.name);
              this.d = d;
            }
          }
        });
      } else {
        this.d = this.category;
      }
    },
    toArticleHandler(id) {
      this.$router.push({ path: "/article", query: { id } });
    },
    toListHandler(cItem) {
      // this.$router.go(0)
      // this.$router.query = cItem
      this.$router.replace({
        path: "/list",
        query: cItem,
      });
      this.$router.go(0);
    },
    pageChangeHandler(page) {
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles() {
      this.loading = true;
      let url = "/index/article/pageQuery";
      this.param.categoryId = this.category.id;
      get(url, this.param)
        .then((resp) => {
          this.articleData = resp.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    loadCategoryTree() {
      let url = "index/category/findByParentId";
      if(this.category.parentId){
        this.param.parentId = this.category.parentId;
      }else{
        this.param.parentId = this.category.id;
      }
      get(url,this.param).then((resp) => {
        this.categoryChild = resp.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$color_primary: #6280b1;
.list {
  .content {
    text-align: center;
    min-width: 1050px;
    .wrapper {
      width: 80%;
      & > .listHeader {
        display: flex;
        justify-content: space-between;
        .header_left {
          flex: 2;
          font-size: 26px;
          color: #333;
          border-bottom: #385284 solid 2px;
          line-height: 2.5em;
        }
        .header_right {
          flex: 6;
          font-size: 16px;
          border-bottom: #e6e1da solid 2px;
          text-align: right;
          line-height: 4em;
        }
      }
      & > .list_inner {
        margin-top: 20px;
        display: flex;
        // 测试高度
        height: 500px;
        .inner_left {
          flex: 2;
          // background-color: aqua;
          ul {
            li {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              color: #333;
              cursor: pointer;
              .li_left {
                flex: 6;
                font-size: 16px;
                line-height: 3em;
              }
              .li_right {
                flex: 4;
                font-size: 20px;
                line-height: 2.5em;
              }
            }
            & > li.current,
            & > li:hover {
              background-color: #385284;
              color: #fff;
            }
          }
        }
        .inner_right {
          flex: 6;
          // background-color: aquamarine;
          .list_item {
            width: 85%;
            // background-color: bisque;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            line-height: 3em;
            border-bottom: rgb(219, 218, 218) solid 1px;
            cursor: pointer;
            .item_title {
              text-align: left;
              color: #333;
            }
            .item_date {
              text-align: right;
              color: #333;
            }
          }
          .list_item:hover {
            background-color: rgb(240, 240, 240);
            .item_title {
              color: #385284;
            }
          }
          .page_query {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>